<script setup>
const porps = defineProps({
  modelValue: Number
})
const emits = defineEmits(['update:modelValue'])
</script>
<template>
  <div class="app-page">
    <div class="lef" @click="emits('update:modelValue', modelValue - 1)">-</div>
    <div class="main">{{ modelValue }}</div>
    <div class="right" @click="emits('update:modelValue', modelValue + 1)">+</div>
  </div>
</template>
<style scoped lang="scss">
.app-page {
  display: flex;
  box-sizing: border-box;
  border: #e4e4e4 solid 1px;
  line-height: 30px;
  width: 120px;
  div {
    height: 30px;
  }
  .lef,
  .right {
    background-color: #f8f8f8;
    width: 30px;
  }
  .main {
    width: 60px;
  }
}
</style>
